<template>
	<view>
		<swiper 
		:duration="500"
		:current="current"  
		:data-index='current' 
		@change="toTab"
		id="自动获取窗口高度,然后剪去底部50px和nav45"
		:style="[{'height': height-95 + 'px'},{height:height-tmHeight + 'px'}]"
		>   
		<!-- 这里再从父页面传个高度进来，重置一下，
		主要是逛逛页面（店铺页）的Header占用了117高度，和这里不统一
		 就先穿个高度进来算了，免得改来该去，要改很多
		-->
			<slot name="TabBar"></slot>
			<!-- <swiper-item>
				<slot name="0"></slot>
			</swiper-item> -->
		</swiper>
	</view>
</template>

<script>
	export default {
		name:"FatFatMeng-tabbar",
		props: {
			currentcss: {
				type: String,
				default: '#000'
			},
			current: {
				default: 0
			},
			// 天猫店铺Header高度 【逛逛页】
			tmHeight: {
				type:Number,//117 + 底部tab高度50 = 167
				default:95 //默认95，不能为0，否则浏览器会覆盖第一个参数
			}
		},
		data() {
			return {
				// 当前 swipoer的item位置
				//Tabindex:0,
				//可使用窗口高度 默认0 赋值给选项卡swiper :https://www.nps.ink/350334.html
				height: uni.getSystemInfoSync().screenHeight,
			};
		},
		methods:{
			// 切换swiper触发的事件
			toTab(e){
				let index = e.detail.current
				//this.Tabindex = index
				console.log("TabBar组件");//当前样式
				console.log('TabBar当前位置：' + index);//当前位置
				this.$emit("changeTabBar",index)
			},
		}
	}
</script>

<style lang="scss" scoped>
	swiper {
		swiper-item {
			overflow-y: scroll;
			box-sizing: border-box;
			width: 100%;
		}
	}
	
</style>
